<script lang="ts" setup name="Supplier">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import {
  createSupplierAPI,
  deleteAllSupplierAPI,
  deleteSupplierAPI,
  editSupplierAPI,
  getSupplierAPI,
  getSupplierAreaAPI,
} from '~/src/api/goods'
import { Information } from '~/src/api/interface/information'
import { SupplierListColumns } from '../columns/supplierColumns'
import SupplierDialog from './SupplierDialog.vue'

const tableRef = ref<ProTableInstance>()
const initParam = reactive({ supplierCode: 0 })

const treeFilterData = ref<Information.SupplierAreaList[]>([])
const initData = reactive({
  id: 0,
  settleType: 1,
  businessType: 1,
  commissionRate: 0,
  monCheckCyclse: 30,
  checkOutCycle: 30,
})
const getTreeFilter = async () => {
  const { data } = await getSupplierAreaAPI({ pageNum: 1, pageSize: 9999 })
  treeFilterData.value = data.list
  initParam.supplierCode = treeFilterData.value[0].id as number
}
onMounted(() => {
  getTreeFilter()
})

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  tableRef.value!.pageable.pageNum = 1
  initParam.supplierCode = val
}

const dialogRef = ref<InstanceType<typeof SupplierDialog> | null>(null)
const openDialog = (title: string, row: Partial<Information.SupplierList> = {}) => {
  const params = {
    title,
    row: { ...row, regionId: title === '编辑' ? row.regionId : initParam.supplierCode },
    isView: title === '查看',
    api: title === '新增' ? createSupplierAPI : title === '编辑' ? editSupplierAPI : undefined,
    areaList: treeFilterData.value,
    getTableList: tableRef.value?.getTableList,
  }
  dialogRef.value?.acceptParams(params)
}

// 删除
const deleteAccount = async (params: Information.SupplierList) => {
  await useHandleData(deleteSupplierAPI, { id: params.id }, `删除【${params.name}】供应商`)
  tableRef.value?.getTableList()
}
const deleteAll = async () => {
  useDeleteData(deleteAllSupplierAPI, tableRef.value as ProTableInstance)
}
</script>

<template>
  <div class="auto-height-container main-box" style="flex-direction: row !important">
    <tree-filter
      :data="treeFilterData"
      :default-value="initParam.supplierCode"
      :isCard="false"
      label="name"
      title="供应商区域"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <pro-table
        ref="tableRef"
        border
        :columns="SupplierListColumns"
        :indent="20"
        :init-param="initParam"
        :is-span-method="true"
        :isCard="false"
        :request-api="getSupplierAPI"
        :request-auto="false"
        row-key="id"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        title="供应商列表"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openDialog('新增', initData)">新增供应商</el-button>
          <el-button v-auth="'add'" :icon="Delete" type="primary" @click="deleteAll">删除</el-button>
        </template>
        <template #supplierCode="{ row }">
          <el-button v-auth="'edit'" :icon="EditPen" link type="primary" @click.stop="openDialog('编辑', row)">
            {{ row.supplierCode }}
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button v-auth="'delete'" :icon="Delete" link type="primary" @click.stop="deleteAccount(scope.row)">删除</el-button>
        </template>
      </pro-table>
    </div>
    <supplier-dialog ref="dialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
